<template>
  <el-form
    ref="activityRefForm"
    :model="activityQuery"
    label-width="105px"
    :rules="activityRules"
  >
    <el-form-item label="负责人" prop="ownerId">
      <el-select
        v-model="activityQuery.ownerId"
        placeholder="请选择负责人"
        @click="loadOwner"
        clearable
      >
        <el-option
          v-for="item in ownerOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="活动名称" prop="name"
      ><!-- 编辑 -->
      <el-input v-model="activityQuery.name" />
    </el-form-item>
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker
        style="width: 100%"
        v-model="activityQuery.startTime"
        type="datetime"
        placeholder="请选择创键时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime">
      <el-date-picker
        style="width: 100%"
        v-model="activityQuery.endTime"
        type="datetime"
        placeholder="请选择创键时间"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="活动预算" prop="cost"
      ><!-- 编辑 -->
      <el-input v-model="activityQuery.cost" />
    </el-form-item>
    <el-form-item label="活动描述" prop="description">
      <el-input
        v-model="activityQuery.description"
        type="textarea"
        :rows="6"
        placeholder="请输入活动描述"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="activitySubmit"> 提交 </el-button>
      <el-button @click="goBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { onMounted, reactive, ref, getCurrentInstance } from "vue";
import { doGet, doPut, doPost } from "@/http/httpRequest";
import router from "@/router/router";
import { useRoute } from "vue-router";
import { messageTip, messageConfirm } from "@/util/util";
export default {
  props: ["reload"],
  setup(props) {
    const route = useRoute();
    let activityQuery = reactive({});
    const { proxy } = getCurrentInstance();
    let activityRules = reactive({
      ownerId: [{ required: true, message: "请选择负责人", trigger: "blur" }],
      name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      startTime: [
        { required: true, message: "请选择开始时间", trigger: "blur" },
      ],
      endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
      cost: [
        { required: true, message: "请输入活动预算", trigger: "blur" },
        //正则表达式，从网上找，或者AI工具找，找到后需要测试一下，因为有可能找到的正则有问题
        {
          pattern: /^[0-9]+(\.[0-9]{2})?$/,
          message: "活动预算必须是整数或者两位小数",
          trigger: "blur",
        },
      ],
      description: [
        { required: true, message: "请输入活动描述", trigger: "blur" },
        {
          min: 5,
          max: 255,
          message: "活动描述长度为5-255个字符",
          trigger: "blur",
        },
      ],
    });
    let ownerOptions = ref([]);
    function loadOwner() {
      doGet("/api/owners").then((resp) => {
        if (resp.data.code === 200) {
          ownerOptions.value = resp.data.data;
        }
      });
    }
    onMounted(() => {
      loadOwner();
      loadActivity();
    });
    function loadActivity() {
      let id = route.params.id;
      if (id) {
        doGet("/api/activity/" + id, {}).then((resp) => {
          if (resp.data.code === 200) {
            Object.assign(activityQuery, resp.data.data);
          }
        });
      }
    }
    function goBack() {
      router.go(-1);
    }
    function activitySubmit() {
      let formData = new FormData();
      for (let field in activityQuery) {
        if (activityQuery[field]) {
          formData.append(field, activityQuery[field]);
        }
      }
      proxy.$refs.activityRefForm.validate((isValid) => {
        if (isValid) {
          if (activityQuery.id > 0) {
            doPut("/api/activity", formData).then((resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                router.push("/dashboard/activity/");
                props.reload();
              } else {
                messageTip("编辑失败", "fail");
              }
            });
          } else {
            doPost("/api/activity", formData).then((resp) => {
              if (resp.data.code === 200) {
                messageTip("提交成功", "success");
                router.push("/dashboard/activity/");
                props.reload();
              } else {
                messageTip("提交失败", "fail");
              }
            });
          }
        }
      });
    }
    return {
      loadActivity,
      activitySubmit,
      activityQuery,
      activityRules,
      ownerOptions,
      loadOwner,
      goBack,
    };
  },
};
</script>
<style scoped>
</style>
